<template>
  <div>
<!-- 页面头 -->
  <!-- Scroll-top -->
  <button
      class="scroll-top scroll-to-target"
      @click.prevent="backTop"
      data-target="html"
      title="回到顶部"
    >
      <i class="fas fa-angle-up"></i>
    </button>
    <!-- Scroll-top-end-->

    <!-- header-area -->
    <header>
      <!-- header-message -->
     
      <header_message v-if="head_msg" :head_msg="head_msg" ></header_message>
      <!-- header-message-end -->

      <!-- header-top-start -->
      <header_top_start></header_top_start>
      <!-- header-top-end -->

      <!-- header-search-area -->
    <header_search_area></header_search_area>
      <!-- header-search-area-end -->
        <header_search_area_end></header_search_area_end>
    </header>
    <!-- header-area-end -->
  </div>
</template>

<script>
import { mapActions,mapState,mapGetters,mapMutations } from 'vuex'
import { isNullOrUndefind, JsonExcludeNullOrUndefind } from '@/utils/utils'
import  header_message from '../head/part/header-message'
import header_top_start from '../head/part/header-top-start'
import header_search_area from '../head/part/header-search-area'
import header_search_area_end from '../head/part/header-search-area-end'

export default {
    data() {
        return {
        
                  }
    },
    computed:{
          ...mapState({
            head_msg:state=>state.temporary.head_msg,
          })
    },
    components:{
        header_message,
        header_top_start,
        header_search_area,
        header_search_area_end
    },
 
    created() {
      if(!isNullOrUndefind(window.sessionStorage.getItem('delHeadmsg'))){
          this.$store.dispatch('temporary/getHead_msg')
         
      }
    },
 // vue的两个生命钩子，这里不多解释。
// window对象，所有浏览器都支持window对象。它表示浏览器窗口，监听滚动事件
mounted () {
  window.addEventListener('scroll', this.scrollToTop)
},
destroyed () {
  window.removeEventListener('scroll', this.scrollToTop)
},
 
 
methods: {
  
  // 点击图片回到顶部方法，加计时器是为了过渡顺滑
  backTop () {
      const that = this
      let timer = setInterval(() => {
        let ispeed = Math.floor(-that.scrollTop / 5)
        document.documentElement.scrollTop = document.body.scrollTop = that.scrollTop + ispeed
        if (that.scrollTop === 0) {
          clearInterval(timer)
        }
      }, 16)
  },
 
  // 为了计算距离顶部的高度，当高度大于60显示回顶部图标，小于60则隐藏
  scrollToTop () {
    const that = this
    let scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
    that.scrollTop = scrollTop
    if (that.scrollTop > 60) {
      that.btnFlag = true
    } else {
      that.btnFlag = false
    }
  }
}
};
</script>

<style>
</style>